<template>
	<view style="padding: 0 24rpx 60rpx;border:1rpx solid #EFEFEF;background-color: #fff;" class="must_know">
		<!-- <c-nav-bar :title="titleHeader" ></c-nav-bar> -->
		<u-tabs :list="list" @click="click" itemStyle="width:50%;padding:22rpx 0;font-size:32rpx;color:#111"
			activeStyle="color:#333;font-weight:bold" lineWidth="64" lineHeight="6" lineColor="#333333"
			:current="current" v-if="type==1"></u-tabs>
		<!-- 	<u-tabs :list="list2" @click="click" itemStyle="width:100%;padding:22rpx 0" lineWidth="64" lineHeight="6"
			:current="current" v-else></u-tabs> -->
		<template v-if="current==1">
			<view class="tit">购票须知</view>
			<!-- <view class="txt">{{info.ticketNotice}}</view> -->
			<u-parse :content="info.ticketNotice"></u-parse>
			<view class="txt t2">注意事项: {{info.note||'无'}}</view>
			<view class="tit">运营时间</view>

			<view class="yuefen y1">
				<view class="yunying11">
					月份
				</view>
				<view class="yunying11">
					运营时间
				</view>
				<view class="yunying11">
					关闭时间
				</view>
			</view>
			<view class="yuefen" v-for="(item,index) in operateDate" :key="index">
				<view class="yunying11">
					{{item.month}}
				</view>
				<view class="yunying11">
					{{item.operateDate}}
				</view>
				<view class="yunying11">
					{{item.intoDate}}
				</view>
			</view>
			<template v-if="info.startPrice>0">

				<view class="tit">优待政策</view>

				<view class="yuefen1 y1">
					<view class="yunying111">
						人群
					</view>
					<view class="yunying111">
						适用条件
					</view>
					<view class="yunying111">
						优待政策
					</view>
				</view>
				<view class="yuefen1" v-for="(item,index) in preferentialPolicies" :key="index">
					<view class="yunying111">
						{{item.human}}
					</view>
					<view class="yunying111 mid">
						{{item.condition}}
					</view>
					<view class="yunying111">
						{{item.preferential}}
					</view>
				</view>
				<view class="tit">退改规则</view>
				<view class="lt">
					<text>随时退，</text>未使用可随时申请退订。
				</view>
				<view class="lt">
					如需改期，请申请退订后重新预订。
				</view>
			</template>
		</template>
		<template v-else>
			<view style="padding-top:30rpx;font-weight: bold;font-size:32rpx;" v-if="type!=1">景区介绍</view>
			<view class="content">
				<u-parse :content="info.infoIntroduce"></u-parse>
				<!-- <rich-text :nodes="info.infoIntroduce | filtersRichText"></rich-text> -->
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// titleHeader:'景点详情',
				list: [{
					name: '景区介绍'
				}, {
					name: '购票须知'
				}],
				list2: [{
					name: '景区介绍'
				}],
				current: 0,
				operateDate: [],
				preferentialPolicies: [],
			}
		},
		props: ['info', 'type'],
		filters: {
			filtersRichText(html) { //控制小程序中图片大小
				if (html) {
					let newContent = html.replace(/<img[^>]*>/gi, (match, capture) => {
						match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
						match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
						match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
						return match;
					});
					// newContent = newContent.replace(/style="[^"]+"/gi, (match, capture)=>{
					// 	match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
					// 	return match;
					// });
					// newContent = newContent.replace(/<br[^>]*\/>/gi, '');
					newContent = newContent.replace(/\<img/gi,
						'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
					return newContent;
				}
			},
			delPreferentialPolicies(val) {
				console.log(val)
				if (val != '') {
					console.log(JSON.parse(val))
					return JSON.parse(val)
				}
			},
		},
		onLoad(prop) {
			console.log(prop);
			this.current = prop.type;
			console.log(this.type)
		},
		methods: {
			click(e) {
				this.current = e.index;
				if (e.index == 1) {
					this.operateDate = JSON.parse(this.info.operateDate);
					this.preferentialPolicies = JSON.parse(this.info.preferentialPolicies);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-tabs__wrapper__nav__item__text.data-v-48634e29 {
		font-size: 16px !important;
		color: #333;
	}

	// .must_know{
	// 	padding-top: 130rpx;
	// }
	img {
		width: 100%
	}
.lt{
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
	text{
		font-weight: bold;
	}
}
	.yuefen1 {
		box-sizing: border-box;
		width: 100%;
		min-height: 80rpx;
		display: grid;
		grid-template-columns: 24% auto 24%;
		text-align: left;
		.yunying111 {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 80rpx;
			line-height: 40rpx;
			min-width: 25%;
			padding: 10px;
			border-bottom: 1rpx solid #ccc;
			border-right: 1rpx solid #ccc;
			color: #333;
			font-size: 24rpx;
			border-left: 1rpx solid #ccc;
		}
		&.y1 {
			border-top: 1rpx solid #ccc;
			border-radius: 8rpx 8rpx 0 0;
			background-color: #F5F8FA;
			.yunying111 {
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		&:last-of-type {
			border-radius: 0 0 8rpx 8rpx;

			.yunying111 {
				&:first-child {
					border-radius: 0 0 0 8rpx;
				}

				&:last-child {
					border-radius: 0 0 0 8rpx;
				}

			}
		}
	}

	

	.yuefen {
		box-sizing: border-box;
		width: 100%;
		height: 80rpx;
		display: flex;
		border-left: 1rpx solid #ccc;
		.yunying11 {
			box-sizing: border-box;
			width: 33.33%;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-bottom: 1rpx solid #ccc;
			border-right: 1rpx solid #ccc;
			font-size: 24rpx;
			color: #333;
		}
		&.y1 {
			border-top: 1rpx solid #ccc;
			border-radius: 8rpx 8rpx 0 0;
			.yunying11 {
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		&:last-of-type {
			border-radius: 0 0 8rpx 8rpx;
			.yunying11 {
				&:first-child {
					border-radius: 0 0 0 8rpx;
				}

				&:last-child {
					border-radius: 0 0 0 8rpx;
				}
			}
		}
	}

	.yunying1 {
		box-sizing: border-box;
		width: 33.33%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border-right: 1px solid #e6e6e6;
	}

	

	.yunying {
		box-sizing: border-box;
		width: 100%;
		height: 80rpx;
		display: flex;
		background-color: #F5F8FA;
	}

	.content {
		box-sizing: border-box;
		padding: 30rpx 0;
		line-height: 50rpx;
		color: #666;
		font-size: 26rpx;

		image {
			width: 100%;
			margin: 16rpx 0;
			height: 460rpx;
		}
	}

	.tit {
		box-sizing: border-box;
		margin: 44rpx 0 30rpx;
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
		font-family: PingFang-SC-Bold, PingFang-SC;
	}

	.txt {
		box-sizing: border-box;
		font-size: 28rpx;
		color: #333;

		&.t2 {
			color: #FF4141
		}
	}
</style>